<template>
  <div class="app-container">
    <section>
      <div class="contentBox" >
        <div class="title">
          <span>{{ $route.query.title }}</span>
        </div>
        <div class="content">
          <el-form
            ref="form"
            :model="tableData"
            class="form"
            label-width="110px"
          >
            <el-form-item label="申请查看时间：" style="width: 100%">
              <span
                >{{ tableData.apply_end_time | parseTime("{y}-{m}-{d}") }} -
                {{
                  tableData.apply_start_time | parseTime("{y}-{m}-{d}")
                }}</span
              >
            </el-form-item>
            <el-form-item label="申请门店：" style="width: 100%">
              <span>{{ tableData.store.title }}</span>
            </el-form-item>
            <el-form-item label="申请人：" style="width: 100%">
              <span>{{ tableData.staff.name }}</span>
            </el-form-item>
            <el-form-item label="岗位：" style="width: 100%">
              <span>{{ tableData.position.title }}</span>
            </el-form-item>
            <el-form-item label="申请时间：" style="width: 100%">
              <span>{{ tableData.dateYear }}</span>
            </el-form-item>
            <el-form-item label="申请理由：" style="width: 100%">
              <el-input
                readonly
                type="textarea"
                v-model="tableData.content"
                rows="4"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="margin-top: 40px">
            <el-button style="width: 100px" @click="$router.go(-1)"
              >返回</el-button
            >
            <el-button style="width: 100px" type="danger" @click="save(1)" v-if="tableData.status == 0"
              >驳回</el-button
            >
            <el-button type="primary" style="width: 100px" @click="save(2)" v-if="tableData.status == 0"
              >通过</el-button
            >
            <el-button type="primary" style="width: 100px"  v-if="tableData.status == 1"
              >已通过</el-button
            >
            <el-button style="width: 100px" type="danger"  v-if="tableData.status == 2"
              >已驳回</el-button
            >
          </div>
        </div>
        <el-dialog
          title="驳回"
          :visible.sync="dialogFormVisible"
          width="500px"
          :before-close="handleClose"
        >
          <el-form :model="from">
            <el-form-item label="">
              <el-input
                v-model="from.examine_content"
                placeholder="请输入驳回理由"
                type="textarea"
                rows="4"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false;handleClose()">取 消</el-button>
            <el-button type="primary"  @click="reject()"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: {},
      id: "",
      from: {
        id: "",
        status: "",
        examine_content: "",
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.from.id = this.id;
      this.getRoyaltyApply();
    }
    this.$route.meta.title = this.$route.query.title;
  },
  mounted() {},
  methods: {
    // 获取详情
    async getRoyaltyApply() {
      let { code, data } = await this.$Http.getRoyaltyApply({ id: this.id });
      if (code) {
        data.create_time = data.create_time.split(" ");
        data.dateYear = data.create_time[0];
        data.dateMonth = data.create_time[1];
        this.tableData = data;
      }
    },
    handleClose(dom) {
      this.from = this.$options.data().from
      this.dialogFormVisible = false;
      dom && dom();
    },
    // 驳回
    async reject(){
      if(!this.from.examine_content){
          this.$message.error("请输入驳回原因")
          return
      }
        let { code } = await this.$Http.royaltyApply(this.from);
         if (code) {
          this.dialogFormVisible = false
          this.$message.success("您已驳回");
          this.$router.go(-1);
        }
    },
    async save(type) {
      if (type == 1) {
        //驳回
        this.from.status = 2;
        this.dialogFormVisible = true
      } else {
        //通过
        this.from.status = 1;
        let { code} = await this.$Http.royaltyApply(this.from);
        if (code) {
          this.$message.success("您已通过");
          this.$router.go(-1);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-width: 900px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      max-width: 800px;
      height: 100%;
      .form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
}
::v-deep {
  .el-input {
    width: 250px;
  }
  .el-icon-circle-plus-outline,
  .el-icon-remove-outline {
    color: #999;
    font-size: 26px;
    margin: 0 5px;
  }
  .el-icon-circle-plus-outline {
    margin-left: 20px;
  }
  .el-icon-remove-outline {
    color: #f00;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__content {
    display: flex;
    align-items: center;
  }
  .el-radio-group {
    margin-top: 10px;
  }
}

</style>